import { CommonModal } from "@/pages/OrderModule/common/components/CommonModal";
import Typography from "@/pages/OrderModule/common/components/Typography";
import { Col, List, Row, message } from "antd";
import { useState, useEffect } from "react";
import FieldCheckboxFormItem from "./FieldCheckboxFormItem";
import CommonLoading from "@/components/CommonLoading";
import { queryFieldMappingConfig, fieldMappingConfigSave } from "../../../../services";
import { find } from "lodash";

//默认展示的列(订单字段)
const defaultCheckedOrders = [
	{ name: "系统订单号", display: true },
	{ name: "店铺订单号", display: true },
	{ name: "买家账号", display: true },
	{ name: "平台", display: true },
	{ name: "店铺", display: true },
	{ name: "总金额", display: true },
	{ name: "商品总金额", display: true },
	{ name: "包材费", display: true },
	{ name: "服务费", display: true },
	{ name: "预估运费", display: true },
	{ name: "实付运费", display: true },
	{ name: "平台实付金额", display: true },
	{ name: "订单支付状态", display: true },
	{ name: "订单状态", display: true },
	{ name: "异常原因", display: true },
	{ name: "异常处理意见", display: true },
	{ name: "仓库状态", display: true },
	{ name: "发货仓", display: true },
	{ name: "快递", display: true },
	{ name: "快递单号", display: true },
	{ name: "平台禁发快递公司", display: true },
	{ name: "省", display: false },
	{ name: "市", display: false },
	{ name: "区", display: false },
	{ name: "地址", display: true },
	{ name: "地址（包含省市区）", display: false },
	{ name: "手机号或固话", display: true },
	{ name: "买家留言", display: true },
	{ name: "旗帜", display: true },
	{ name: "卖家备注", display: true },
	{ name: "订单备注", display: true },
	{ name: "平台最晚发货时间", display: true },
	{ name: "剩余时间", display: true },
	{ name: "重量", display: true },
	{ name: "体积", display: true },
	{ name: "发货时间", display: true },
	{ name: "系统支付时间", display: true },
	{ name: "平台付款时间", display: true },
	{ name: "商品备注", display: true }
];

//默认展示的列(商品字段)
const defaultCheckedGoods = [
	{ name: "商品名称", display: true },
	{ name: "颜色及规格", display: true },
	{ name: "供应商", display: true },
	{ name: "档口号", display: true },
	{ name: "商品编码", display: true },
	{ name: "款式编码", display: true },
	{ name: "数量", display: true },
	{ name: "商品单价", display: true },
	{ name: "商品金额", display: true },
	{ name: "店铺价", display: true },
	{ name: "支付状态", display: true }
];

//请求枚举code
const exportCode = {
	'sysOrder': 1,
	'payOrder': 1,
	'history': 2,
	'orderShip': 3,
}

//打单发货的信息
const orderShipCode = [
	{ name: "打印状态", display: true },
	{ name: "打印批次", display: true }
]

const getDefaultCode = (pageCode) => {
	//打单发货新增打印字段
	if(pageCode == 'orderShip') {
		const arr = [ ...defaultCheckedOrders ];
		arr.splice(1, 0, ...orderShipCode);
		return arr;
	}
	return defaultCheckedOrders;
}

/** 维护导出表字段信息 */
function ExportOrderExcelModal(props) {
	const { operationPage, handleCancel } = props;

	const [fieldList, setFieldList] = useState([]); //导出字段
	
	const [showOrderList, setShowOrderList] = useState(getDefaultCode(operationPage)); //更改之后的数据(订单)
	const [showGoodList, setShowGoodList] = useState(defaultCheckedGoods); //更改之后的数据(商品)
	const [id, setId] = useState(""); //当前id
	const [loading, setLoading] = useState(false);

	useEffect(() => {
		const arr1 = showOrderList.filter(item => item.display);
		const arr2 = showGoodList.filter(item => item.display);
		setFieldList([...arr1, ...arr2]);
	}, [showOrderList, showGoodList]);

	useEffect(() => {
		getFieldMappingConfig();
	}, []);

	//查询导出字段配置
	const getFieldMappingConfig = async () => {
		setLoading(true);
		const { data = {}, success } = await queryFieldMappingConfig({
			type: exportCode[operationPage],
			useType: 2
		});
		if (success) {
			const { id, mappingList = [] } = data;
			setId(id);
			if (mappingList.length) {
				const list = mappingList.filter(v => v.display);
				setFieldList(list);
				showOrderList.map(item => {
					const obj = find(mappingList, ["name", item.name]);
					if (obj) {
						item.display = obj.display;
					} else {
						item.display = false;
					}
				});
				setShowOrderList(showOrderList);
				showGoodList.map(item => {
					const obj = find(mappingList, ["name", item.name]);
					if (obj) {
						item.display = obj.display;
					} else {
						item.display = false;
					}
				});
				setShowGoodList(showGoodList);
			}
		}
		setLoading(false);
	};

	//确定
	const handleSubmit = async () => {
		setLoading(true);
		const { success, msg = "" } = await fieldMappingConfigSave({
			mappingDetail: JSON.stringify([...showOrderList, ...showGoodList]),
			id
		});
		if (success) {
			message.success(msg);
			handleCancel();
		}
		setLoading(false);
	};

	const onOk = () => {
		handleSubmit();
	};

	const FieldCheckboxFormItemProps1 = {
		title: "订单字段",
		data: defaultCheckedOrders,
		showList: showOrderList,
		onChange(arr) {
			setShowOrderList(arr);
		}
	};

	const FieldCheckboxFormItemProps2 = {
		title: "商品字段",
		data: defaultCheckedGoods,
		showList: showGoodList,
		onChange(arr) {
			setShowGoodList(arr);
		}
	};

	return (
		<>
			<CommonModal title={{ title: "维护导出表字段信息" }} open={true} width="750px" onOk={onOk} onCancel={handleCancel}>
				<div>
					<Row gutter={48}>
						<Col span={9}>
							<FieldCheckboxFormItem {...FieldCheckboxFormItemProps1} />
						</Col>
						<Col span={9}>
							<FieldCheckboxFormItem {...FieldCheckboxFormItemProps2} />
						</Col>
						<Col span={6}>
							<div style={{ marginTop: " 28px" }}>
								<List
									size="small"
									header={<Typography useBold>导出字段</Typography>}
									bordered
									dataSource={fieldList}
									renderItem={item => <List.Item>{item.name}</List.Item>}
								/>
							</div>
						</Col>
					</Row>
				</div>
				<CommonLoading loading={loading} />
			</CommonModal>
		</>
	);
}

export default ExportOrderExcelModal;
